<template>
    <mu-container class="container">
        <van-steps :active="activeStep">
			<van-step>填写信息</van-step>
			<van-step>确认样本</van-step>
			<van-step>上传文件</van-step>
			<van-step>支付订单</van-step>
		</van-steps>
        <div class="fp">
            <van-form @submit="submit" v-if="!bankInfoShow">
                <van-field name="switch" label="是否需要发票">
                    <template #input v-if="!bankInfoShow">
                        <van-switch v-model="isneedfp" size="20" />
                    </template>
                </van-field>
                <div v-if="isneedfp">
                    <van-field
                        name="开票类型"
                        label="开票类型"
                        :rules="[{ required: true, message: '请选择开票类型' }]"
                    >
                        <template #input>
                            <van-radio-group v-model="fpInfo.fptype" direction="horizontal">
                                <van-radio :name="item.value"  v-for="(item,index) in fpTypeArr" :key="index">{{item.value}}</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                    <van-field
                        v-model="fpInfo.fpdwname"
                        name="单位名称"
                        label="单位名称"
                        placeholder="单位名称"
                        :rules="[{ required: true, message: '请填写单位名称' }]"
                    />
                    <van-field
                        v-model="fpInfo.fpcreditcode"
                        name="纳税人识别号"
                        label="纳税人识别号"
                        placeholder="纳税人识别号"
                        :rules="[{ required: true, message: '请填写纳税人识别号' }]"
                    />
                    <van-field
                        v-model="fpInfo.fpaddress"
                        name="地址"
                        label="地址"
                        placeholder="地址"
                        :rules="[{ required: true, message: '请填写地址' }]"
                    />
                    <van-field
                        v-model="fpInfo.fpphone"
                        name="电话"
                        label="电话"
                        placeholder="电话"
                        :rules="[{ required: true, message: '请填写电话' }]"
                    />
                    <van-field
                        v-model="fpInfo.fpbankname"
                        name="开户行"
                        label="开户行"
                        placeholder="开户行"
                        :rules="[{ required: true, message: '请填写开户行' }]"
                    />
                    <van-field
                        v-model="fpInfo.fpbankaccount"
                        name="开户账号"
                        label="开户账号"
                        placeholder="开户账号"
                        :rules="[{ required: true, message: '请填写开户账号' }]"
                    />
                    <van-field
                        v-model="fpInfo.lxrname"
                        name="联系人"
                        label="联系人"
                        placeholder="联系人"
                        :rules="[{ required: true, message: '请填写联系人' }]"
                    />
                    <van-field
                        v-model="fpInfo.lxrmobile"
                        name="联系人手机"
                        label="联系人手机"
                        placeholder="联系人手机"
                        :rules="[{ required: true, message: '请填写联系人手机' }]"
                    />
                    <van-field
                        v-model="fpInfo.email"
                        name="发票接收邮箱"
                        label="发票接收邮箱"
                        placeholder="发票接收邮箱"
                        :rules="[{ required: true, message: '请填写发票接收邮箱' }]"
                    />
                </div>
                <div>
                    <van-field
                        name="支付方式"
                        label="支付方式"
                        :rules="[{ required: true, message: '请选择支付方式' }]"
                    >
                        <template #input>
                            <van-radio-group v-model="fpInfo.paytype" direction="horizontal">
                                <van-radio :name="item.key"  v-for="(item,index) in paytypeArr" :key="index">{{item.name}}</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                </div>
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">去支付</van-button>
                </div>
            </van-form >
                
            <van-form v-if="bankInfoShow" class="bankinfo" @submit="bankSubmit">
                <van-field
                    v-model="bankDataToast"
                    name="提示"
                    label="提示"
                    readonly
                    autosize
                    type="textarea"
                />
                <van-field
                    v-model="bankData.bankaccountname"
                    name="银行账户名称"
                    label="银行账户名称"
                    readonly
                />
                <van-field
                    v-model="bankData.bankaccountnumber"
                    name="银行账户号码"
                    label="银行账户号码"
                    readonly
                />
                <van-field
                    v-model="bankData.bankname"
                    name="开户银行名称"
                    label="开户银行名称"
                    readonly
                />
                <van-field
                    v-model="bankData.bankcode"
                    name="开户银行代码"
                    label="开户银行代码"
                    readonly
                />
                <van-field
                    v-model="bankData.orderdetail"
                    name="转账请备注"
                    label="转账请备注(可简写)"
                    autosize
                />
                <van-field
                    name="支付凭据"
                    label="支付凭据"
                >
                    <template #input>
                        <van-uploader v-model="bankDataFilelist" :after-read="afterRead"/>
                    </template>
                </van-field>
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
    </mu-container>
</template>
<script>
    import axios from '../http/api';
    export default {
        props: ['rowguid'],
        data() {
            return {
                activeStep:3,
                guranteID:"NXDZBH20210302119414",
                form:{
                    isneedfp:"",
                },
                isneedfp:true,
                vendorinfo:{},
                fpInfo:{
                    isneedfp:1,
                    fptype:1,
                    paytype:4,
                    rowguid:"",
                    guaranteeid:"",
                },
                fkType:"1",
                fpTypeArr:[],
                payWay:[],
                paytypeArr:[
                    {'name':"微信支付",key:4},
                    {'name':"线下付款",key:9},
                ],
                bankData:{},
                bankInfoShow:false,
                bankDataFilelist:[],
                bankDataToast:"不同订单的支付信息可能存在差异支付前请仔细核对页面信息",
            }
        },
        watch:{
            isneedfp(n){
                if(n){
                    this.fpInfo.isneedfp = 1;
                }else{
                    this.fpInfo.isneedfp = 0;
                }
            }
        },
        methods:{
            queryData: function () {
                var that = this;
                this.$api.orderdetail({
					rowguid: that.$route.query.id
				}).then(function (data) {
					that.fpInfo = data.orderinfo;
                    that.vendorinfo = data.vendorinfo;
                    that.getFpinfo(data.orderinfo.bidder);
                    that.getReceipttype();
                    that.fpInfo.guaranteeid = that.fpInfo.rowguid;
				})
            },
            getFpinfo(bidder){
                var that = this;
                this.$api.getFpinfo({
					bidder: bidder
				}).then(function (data) {
					if(data != null){
                        //that.fpInfo = data;
                        that.common.mixin(data,that.fpInfo);
                    }
				})
            },
            getReceipttype(){
                var that = this;
                this.$api.getReceipttype({
					vendorid: that.fpInfo.vendorid,
				}).then(function (data) {
					for(var i = 0;i < data.length;i++){
                        that.fpTypeArr.push(data[i]);
                    }
                    that.fpInfo.fptype = data[0].value;
				})
            },
            payOrder(){
                var that = this;
                this.$api.payOrder({
					guaranteeid: that.fpInfo.rowguid,
                    paytype: that.fpInfo.paytype,
				}).then(function (data) {
                    if(that.fpInfo.paytype == '4'){
                        axios({
                            url: data.payurl.replace("/bhtong",""),
                            method: 'get',
                        }).then((datain)=>{
                            console.log(datain);

                            window.location.href = datain;
                        })
                    }else{
                        that.bankData = data;
                        that.bankInfoShow = true;
                    }
					
				})
            },

            submit(){
                var that = this;
                this.$api.savereceiptbeforepay(this.fpInfo).then(function (data) {
                    that.payOrder();
				})
            },

            bankSubmit(){
                var that = this;
                this.$api.offlinepay({
                    guaranteeid: that.fpInfo.rowguid,
                    offlinefileguid: that.bankData.offlinefileguid
                }).then(function (data) {
                    if(data.code != 'error'){
                        that.$notify({
                            type:"success",
                            message: "上传成功"
                        });
                        that.$router.push({
                            path: '/order',
                        })
                    }
				})
            },

            afterRead($event) {
                var that = this;
                var formdata = new FormData();
                formdata.append("file",$event.file);
                formdata.append("fileguid",that.bankData.offlinefileguid);
                formdata.append("multifile",0);
                formdata.append("FileType",'.png,.jpg,.jpeg');
                this.$api.offlinepayUpload(formdata).then(function (data) {
                    if(!!data.code){

                    }else{
                        that.$notify({
                            type:"success",
                            message: "上传成功"
                        });
                    }
                    
                })
            },
        },
        mounted(){
            this.queryData();
        }
    }
</script>
<style lang="less" scoped>
    .container {
        padding: 16px;
    }

    .bankinfo /deep/ .van-field__control{
        color: #f18241;
    }
</style>